// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router';
//引入组件
import About from '../pages/About';
import Home from '../pages/Home';
import News from '../pages/News';
import Message from '../pages/Message';
import Detail from '../pages/Detail';

//创建并暴露一个路由器
const router = new VueRouter({
  // 路由的两种工作模式
  // 1.hash     路由带#   #后面做为hash值
  // 2.history  路由不带#   后main做为路径，容易出现404 需要后端解决或者使用nginx
  mode: 'history',
  routes: [
    {
      name: 'guanyu',
      path: '/about',
      meta: { title: '关于' },
      component: About,
      meta: { isAuth: true },
    },
    {
      name: 'zhuye',
      path: '/home',
      meta: { title: '主页' },
      component: Home,
      // 多级路由的使用  使用children进行配置    子路由的path不要加/
      // 跳转的时候要带上父路径
      children: [
        {
          name: 'xinwen',
          path: 'news',
          meta: { isAuth: true, title: '新闻' },
          component: News,
          // 独享前置路由守卫 独享前置路由守卫可以和全局前置路由守卫配合使用   独享的路由守卫没有后置的
          // beforeEnter(to, from, next) {
          //   console.log(from, to);
          //   if (to.meta.isAuth) {
          //     if (localStorage.getItem('name') === 'atguigu') {
          //       next();
          //     } else {
          //       alert('you dont have permission');
          //     }
          //   } else {
          //     next();
          //   }
          // },
        },
        {
          name: 'xinxi',
          path: 'message',
          meta: { isAuth: true, title: '信息' },
          component: Message,
          children: [
            {
              name: 'xiangqing',
              meta: { title: '详情' },
              path: 'detail/:id/:title', //使用params给路由组件传递参数要使用占位符
              component: Detail,
              //props第一种写法，props值为布尔值，表示把接收到的params参数通过props传递给Detail路由组件
              // 此种写法只能用与params传递参数
              // props: true,

              // props第二种写法,props值为函数  返回一个对象，表示将诶收到的参数通过props传递给Detail路由组件
              // 此种写法params和query传递参数都可以用
              props(route) {
                return { id: route.params.id, title: route.params.title };
              },
            },
          ],
        },
      ],
    },
  ],
});

// 全局前置路由守卫 初始化的时候被调用，每次路由切换之前被调用
// router.beforeEach((to, from, next) => {
//   console.log(from, to);
//   if (to.meta.isAuth) {
//     if (localStorage.getItem('name') === 'atguigu') {
//       next();
//     } else {
//       alert('you dont have permission');
//     }
//   } else {
//     next();
//   }
// });

// 全局后置路由守卫，初始化的时候调用，每次路由切换之后调用
router.afterEach((to, from) => {
  // console.log('后置路由守卫:>>', to, from);
  // 后置路由守卫执行之后切换网页的title
  console.log(to.meta.title);
  document.title = to.meta.title || '尚硅谷Vue课程';
});

export default router;
